<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-08 17:05:55
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiSwitch\uiSwitch.vue
 * CIMC-V2
-->
<template>
  <UiFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <el-checkbox
      v-if="info.extension.modelStyle && info.extension.modelStyle.value === 'rectangle'"
      :ref="info._id"
      v-model="formDataModel"
      v-ui-ref="vSetRef"
      :disabled="info.extension.disabled.value || conditionProperty.disabled"
      :false-label="info.extension.inactiveValue.value"
      size="large"
      :true-label="info.extension.activeValue.value"
      @change="handleChange"
    />
    <el-switch
      v-else
      :ref="info._id"
      v-model="formDataModel"
      v-ui-ref="vSetRef"
      :active-value="info.extension.activeValue.value"
      :disabled="info.extension.disabled.value || conditionProperty.disabled"
      :inactive-value="info.extension.inactiveValue.value"
      @change="handleChange"
    />
  </UiFormItem>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiSwitch',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {}
    },
    watch: {
      formDataModel: {
        handler(newVal) {
          // 如果当前没有值的话 则赋值为关闭状态值
          if (!newVal) {
            this.formDataModel = this.info.extension.inactiveValue.value
          }
        },
      },
    },
    created() {
      // this.formDataModel = this.info.extension.inactiveValue.value
      // console.log('开关  -------------  created')
      // 设置默认值
      // setTimeout(() => {
      this.setDefaultValue()
      // }, 1)
    },
    methods: {
      returnValueType(type, value) {
        const _typeArr = [
          ['1', 1, true],
          ['0', 0, false],
        ]
        return _typeArr[type][value]
      },
      handleChange() {
        // 触发条件判断值改变
        this.setPageModulesState('value', this.formDataModel)
        // 调用 change 事件
        this.onChange()
      },
      setDefaultValue() {
        if (this.info.extension.defaultState.value) {
          // 默认为激活状态
          this.formDataModel = this.formDataModel ? this.formDataModel : this.info.extension.activeValue.value
        } else {
          // 默认为未激活状态
          this.formDataModel = this.formDataModel ? this.formDataModel : this.info.extension.inactiveValue.value
        }
      },
    },
  })
</script>
<style lang="scss" scoped></style>
